<!-- BI dashBoard -->
<template>
	<div id="dashBoard">
		<!-- <FlipIem></FlipIem> -->
		<!-- 统计数字=================================== -->
		<div class="count">
			<div class="count-item" v-for="item in countData" :key="item">
				<div class="count-item-title">{{ item.label }}</div>
				<div class="count-item-num">
					<!-- <span>{{ item.value }}</span> -->
					<!-- <transition name="flip">
						<span :key="item.value">{{ item.value }}</span>
					</transition> -->
					<FlipIem :num="item.value"></FlipIem>
					<span>&nbsp;{{ item.unit }}</span>
				</div>
			</div>
		</div>
		<!-- 统计图表=================================== -->
		<div class="statis">
			<!-- 排行榜 -->
			<div class="statis-order card">
				<div class="statis-order1">
					<p class="statis-title">月累计呼叫量排名</p>
					<div class="statis-order1-list order-list">
						<div class="list-item" v-for="(item, i) in teamOrderList" :key="item.deptId">
							<div class="list-item-num" :style="{ background: getOrderColor(i + 1) }">{{ i + 1 }}</div>
							<div class="list-item-name">{{ item.deptName }}</div>
							<div class="list-item-bar">
								<p :style="{ width: getOrderRate(item.callTotalRank, 'team') }"></p>
							</div>
							<div v-if="screenWidthRatio > 1600">{{ tool.formatNumber(item.callTotalRank) }}</div>
							<div v-else>{{ item.callTotalRankStr }}</div>
						</div>
					</div>
				</div>
				<div class="statis-order2">
					<p class="statis-title">调解员调解量&nbsp;TOP{{ agentOrderList.length }}</p>
					<div class="list-title">
						<div class="title-num">排名</div>
						<div class="title-name">调解员姓名</div>
						<div class="title-name">调解中心</div>
						<div class="title-dept">调解量</div>
					</div>
					<vue3ScrollSeamless
						class="statis-order2-list order-list"
						:classOptions="agentClassOptions"
						:dataList="agentOrderList"
					>
						<div class="list-item" v-for="(item, i) in agentOrderList" :key="item.agentId">
							<div class="list-item-num" :style="{ background: getOrderColor(i + 1) }">{{ i + 1 }}</div>
							<div class="list-item-name">{{ item.agentName }}</div>
							<div class="list-item-dept">{{ item.deptName }}</div>
							<!-- <div class="list-item-bar">
								<p :style="{ width: getOrderRate(item.callTotalRank, 'agent') }"></p>
							</div> -->
							<div v-if="screenWidthRatio > 1600">{{ tool.formatNumber(item.callTotalRank) }}</div>
							<div v-else>{{ item.callTotalRankStr }}</div>
						</div>
					</vue3ScrollSeamless>
				</div>
			</div>
			<!-- 省份分布 -->
			<div class="statis-map card">
				<p class="statis-title">调解案件全国分布情况</p>
				<div id="chinaMap"></div>
				<!-- 添加音频播放组件 -->
				<div class="audio-player" v-if="showAudioPlayer">
					<div class="player-header">
						<span>{{ curAreaInfo.area }} - {{ curAreaInfo.label }}</span>
						<span class="close-btn" @click="showAudioPlayer = false">×</span>
					</div>
					<audio
						controls
						controlsList="nodownload noplaybackrate"
						:src="currentAudioUrl"
						class="audio-control"
						ref="audioRef"
					></audio>
				</div>
			</div>
			<!-- 地区排行 -->
			<div class="statis-order-area card">
				<p class="statis-title">调解案件地区排名</p>
				<vue3ScrollSeamless class="statis-order-list" :classOptions="classOptions" :dataList="orderAreaList">
					<div class="list-item" v-for="(item, i) in orderAreaList" :key="i">
						<div class="list-item-num" :style="{ background: getOrderColor(item.order) }">{{ item.order }}</div>
						<div class="list-item-name">{{ item.name }}</div>
						<div class="list-item-bar">
							<p :style="{ width: getOrderRate(item.rate, 'area') }"></p>
						</div>
						<div>{{ item.rate }}%</div>
					</div>
				</vue3ScrollSeamless>
				<!-- <div class="statis-order-list">
					<div class="list-item" v-for="(item, i) in orderAreaList" :key="i">
						<div class="list-item-num" :style="{ background: getOrderColor(item.order) }">{{ item.order }}</div>
						<div class="list-item-name">{{ item.name }}</div>
						<div class="list-item-bar">
							<p :style="{ width: getOrderRate(item.rate, 'area') }"></p>
						</div>
						<div>{{ item.rate }}%</div>
					</div>
				</div> -->
			</div>
		</div>
	</div>
</template>
<script setup name="dashboarda">
	import { onMounted, onUnmounted, nextTick } from 'vue'
	import * as echarts from 'echarts'
	import chinaJson from '@/assets/map/china.json'
	import 'echarts-liquidfill'
	import { throttle } from 'lodash'
	import biChartApi from '@/api/bi/biChartApi.js'
	import tool from '@/utils/tool.js'
	import { vue3ScrollSeamless } from 'vue3-scroll-seamless'
	import FlipIem from './flipItem.vue'
	// 处理地图数据
	chinaJson.features.forEach((item) => {
		item.properties.name = item.properties.name
			.replace('市', '')
			.replace('省', '')
			.replace('自治区', '')
			.replace('回族', '')
			.replace('维吾尔', '')
			.replace('壮族', '')
			.replace('特别行政区', '')
	})
	// ===========================================DATA======================================================
	let chartDom
	let mapChart
	let mapOption = ref({
		// 标题配置
		title: {
			textStyle: {
				color: '#fff'
			}
		},
		// 提示框配置
		tooltip: {
			trigger: 'item', // 数据项触发，鼠标移到省份上时显示
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff'
			},
			padding: [10, 15],
			enterable: true,
			position: function (point, params, dom, rect, size) {
				// 计算tooltip的位置，确保轮播时不超出边界
				const [x, y] = point //初始位置
				const viewWidth = size.viewSize[0]
				const viewHeight = size.viewSize[1]
				const domWidth = size.contentSize[0]
				const domHeight = size.contentSize[1]
				const cusoffset = 20 // 设置统一的偏移量，保证无论左右两侧都不遮挡文字

				let posX = x + cusoffset
				let posY = y

				// 右侧超出
				if (x + domWidth > viewWidth) {
					posX = x - domWidth - cusoffset
				}
				// 底部超出
				if (y + domHeight > viewHeight) {
					posY = y - domHeight
				}
				return [posX, posY]
			},
			formatter: function (params) {
				if (!params.value) {
					return
				}
				let html = `
								<div class="tooltip-header">
									<p>
										${params.name}
									</p>
									<p>
										实时调解案件:&nbsp;${tool.formatNumber(params.value)}&nbsp;件
									</p>
								</div>
								<div class="tooltip-scroll">
									<div class="scroll-content">
								`
				// 重复两次数据以实现无缝滚动
				const repeatedData = [...audioList.value, ...audioList.value]
				repeatedData.forEach((item) => {
					html += `
								<div
									class="scroll-item"
									onmouseover="this.style.backgroundColor='rgba(87, 148, 247, 0.1)'"
									onmouseout="this.style.backgroundColor='transparent'"
									onclick="window.dashBoardTooltipItemClick && window.dashBoardTooltipItemClick('${params.name}', '${item.label}', '${item.url}')"
								>
									<span style="margin-right: 15px;">${item.label}</span>
									<span style="color: #5794F7;">${item.value}</span>
								</div>
							`
				})
				html += `
							</div>
						</div>
						<style>
							@keyframes scroll {
							0% { transform: translateY(0); }
							100% { transform: translateY(-50%); }
							}
							.tooltip-header {
								font-size: 16px;
								font-weight: bold;
								margin-bottom: 10px;
								>p:nth-child(1) {
									text-align: center;
								}
							}
							.tooltip-scroll {
								height: 200px;
								overflow: hidden;
							}
							.tooltip-scroll .scroll-content {
								transition: all 0.3s;
								animation: scroll 20s linear infinite;
								transform: translateZ(0);
								.scroll-item {
									display: flex;
									justify-content: space-between;
									margin: 5px 0;
									padding: 5px;
									cursor: pointer;
								}
							}
							.tooltip-scroll:hover .scroll-content {
								animation-play-state: paused;
								background: rgba(87, 148, 247, 0.05);
							}
						</style>
						`
				return html
			}
		},
		// 视觉映射组件
		visualMap: {
			// min: 0, // 最小值
			// max: 1000, // 最大值
			// text: ['High', 'Low'],
			// realtime: true,
			// calculable: true,
			show: false,
			inRange: {
				color: ['#bae0ff', '#5794F7', '#4B75EE', '#3F4FC8', '#0B22C4'] // 深蓝到亮蓝的渐变，色值顺序浅--》深
			},
			textStyle: {
				color: '#fff' // 文字颜色设为白色
			},
			top: 0
		},
		// 系列列表
		series: [
			{
				type: 'map',
				map: 'china',
				roam: true, // 添加此配置允许缩放平移
				zoom: 1.6, // 缩放比例
				center: [103.5, 35.5],
				scaleLimit: {
					// 缩放限制
					min: 1,
					max: 2
				},
				animationDuration: 1000, // 动画时长
				animationEasing: 'cubicOut', // 动画效果
				animationDurationUpdate: 1000,
				label: {
					show: true,
					fontSize: 10,
					color: '#fff'
				},
				itemStyle: {
					areaColor: '#142957',
					borderColor: '#1E4B9C',
					borderWidth: 1
				},
				emphasis: {
					label: {
						color: '#fff'
					},
					itemStyle: {
						areaColor: '#0066FF'
					}
				},
				// ... 选中的样式 ...
				// select: {
				// 	itemStyle: {
				// 		areaColor: '#EEB140', // 点击后的颜色
				// 		borderColor: '#fff', // 点击后的边框颜色
				// 		borderWidth: 2 // 点击后的边框宽度
				// 	},
				// 	label: {
				// 		color: '#000',
				// 		fontSize: 12
				// 	}
				// },
				data: [
					{ name: '广东', value: 900 },
					{ name: '北京', value: 800 },
					{ name: '上海', value: 700 },
					{ name: '浙江', value: 600 },
					{ name: '江苏', value: 500 },
					{ name: '福建', value: 400 },
					{ name: '山东', value: 300 },
					{ name: '河南', value: 200 },
					{ name: '湖北', value: 100 },
					{ name: '湖南', value: 50 },
					{ name: '安徽', value: 10 },
					{ name: '江西', value: 20 },
					{ name: '四川', value: 200 },
					{ name: '云南', value: 950 },
					{ name: '陕西', value: 800 },
					{ name: '重庆', value: 500 },
					{ name: '贵州', value: 600 },
					{ name: '台湾', value: 30 },
					{ name: '河北', value: 40 },
					{ name: '山西', value: 50 },
					{ name: '内蒙古', value: 620 },
					{ name: '辽宁', value: 70 },
					{ name: '吉林', value: 550 },
					{ name: '黑龙江', value: 10 },
					{ name: '甘肃', value: 20 },
					{ name: '青海', value: 30 },
					{ name: '宁夏', value: 40 },
					{ name: '新疆', value: 655 },
					{ name: '西藏', value: 60 },
					{ name: '广西', value: 70 },
					{ name: '海南', value: 800 }
				]
			}
		]
	})
	let colorList = ['#2657D1', '#5794F7', '#1A3FBE', '#708CE1', '#2A5CEA', '#96BAE4']
	const orderColor = ['#EEB140', '#B2BDCF', '#C5A17D', '#3F4FC8']
	//统计展示数据
	let countData = ref([
		{
			id: 1,
			label: '累计调解成功数量',
			type: 'number',
			field: 'historyMediationSuccessCaseTotal',
			value: 1233556,
			unit: '件'
		},
		{
			id: 2,
			label: '历史调解成功率',
			type: 'rate',
			field: 'historyMediationSuccessRate',
			value: 96,
			unit: '%'
		},
		{
			id: 3,
			label: '本月调解案件总数',
			type: 'number',
			field: 'callTotal',
			value: 0,
			unit: '件'
		},
		{
			id: 4,
			label: '本月调解总时长',
			type: 'duration',
			field: 'totalCallDuration',
			value: 0,
			unit: '分钟'
		},
		{
			id: 5,
			label: '本月拨打总数',
			type: 'number',
			field: 'callOutgoingTotal',
			value: 0,
			unit: '个'
		},
		{
			id: 7,
			label: '本月调解案件金额',
			type: 'amount',
			field: 'caseMoneyStr',
			value: 0,
			unit: '元'
		},
		{
			id: 6,
			label: '本月出勤调解员数量',
			type: 'number',
			field: 'activeAgentTotal',
			value: 0,
			unit: '个'
		}
	])
	let teamOrderList = ref([]) //调解中心排行数据
	let agentOrderList = ref([]) //调解员排行数据
	let orderAreaList = ref() //区域排行数据
	let scrollTimer = ref(null)
	// 滚动的配置
	let classOptions = ref({
		step: 0.1,
		hoverStop: true,
		limitMoveNum: 16
		// singleHeight: 30
	})
	let agentClassOptions = ref({
		step: 0.1,
		hoverStop: true,
		limitMoveNum: 16,
		wheel: false
	})

	// 添加音频播放相关的响应式数据
	const showAudioPlayer = ref(false)
	const curAreaInfo = ref({
		area: '',
		label: '',
		value: ''
	})
	const currentAudioUrl = ref('')
	const audioRef = ref(null)
	let audioList = ref([
		{
			label: '录音1',
			value: '10分钟',
			url: 'https://saas-cti.htrxcall.com/recfile53/20250418/202504181853192379585302581744973599.wav'
		},
		{
			label: '录音2',
			value: '11分钟',
			url: 'https://saas-cti.htrxcall.com/recfile57/20250418/202504181901214454355703321744974081.wav'
		},
		{
			label: '录音3',
			value: '6分钟',
			url: 'https://saas-cti.htrxcall.com/recfile53/20250418/202504181900060757595302341744974006.wav'
		},
		{
			label: '录音4',
			value: '20分钟',
			url: 'https://saas-cti.htrxcall.com/recfile53/20250418/202504181902484385405301131744974168.wav'
		},
		{
			label: '录音5',
			value: '22分钟',
			url: 'https://saas-cti.htrxcall.com/recfile53/20250418/202504181902484385405301131744974168.wav'
		},
		{
			label: '录音6',
			value: '21分钟',
			url: 'https://saas-cti.htrxcall.com/recfile53/20250418/202504181902484385405301131744974168.wav'
		},
		{
			label: '录音7',
			value: '18分钟',
			url: 'https://saas-cti.htrxcall.com/recfile53/20250418/202504181902484385405301131744974168.wav'
		},
		{
			label: '录音8',
			value: '14分钟',
			url: 'https://saas-cti.htrxcall.com/recfile53/20250418/202504181902484385405301131744974168.wav'
		},
		{
			label: '录音9',
			value: '22分钟',
			url: 'https://saas-cti.htrxcall.com/recfile53/20250418/202504181902484385405301131744974168.wav'
		},
		{
			label: '录音10',
			value: '19分钟',
			url: 'https://saas-cti.htrxcall.com/recfile53/20250418/202504181902484385405301131744974168.wav'
		}
	])
	let dashBoardResize
	let tooltipInterval = null //地图轮播定时器
	let curIndex = ref(0) //当前轮播索引
	let updateTopInterval = null //定时更新顶部数据
	let screenWidthRatio = ref(0) //屏幕宽度
	// ===========================================METHODS====================================================
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		// 添加全局点击处理函数
		window.dashBoardTooltipItemClick = dashBoardTooltipItemClick

		setTimeout(async () => {
			//绘制省份分布图--------------------------------
			// 注册地图数据
			echarts.registerMap('china', chinaJson)
			chartDom = document.querySelector('#dashBoard #chinaMap')
			// 初始化时指定主题和渲染器
			mapChart = echarts.init(chartDom)
			mapChart.showLoading('default', {
				text: 'loading',
				color: '#3F4FC8',
				textColor: '#fff',
				maskColor: 'transparent'
			})

			try {
				//处理数据
				const biResult = await getData()
				// console.log('MAIN_STATISTICS_DAY', biResult)
				//顶部数据
				countData.value.forEach((item) => {
					// 根据类型处理数字
					switch (item.type) {
						case 'duration':
							item.value = tool.formatNumber(biResult[item.field].toFixed(2))
							break
						case 'rate':
							item.value = `${tool.formatNumber((biResult[item.field] * 100).toFixed(2))}`
							break
						case 'amount':
							item.unit = `${biResult[item.field].substr(biResult[item.field].length - 1)}`
							item.value = `${biResult[item.field].substr(0, biResult[item.field].length - 1)}`
							break
						default:
							item.value = tool.formatNumber(biResult[item.field].toFixed(0))
							break
					}
				})

				//获取设备屏幕尺寸
				const screenWidth = window.screen.width
				//获取设备分辨率
				const devicePixelRatio = window.devicePixelRatio
				screenWidthRatio.value = screenWidth / devicePixelRatio
				//调解中心排行榜，只展示前四
				teamOrderList.value = biResult.teamAgentVoList.sort((a, b) => {
					return b.callTotalRank - a.callTotalRank
				})
				//调解员排行榜,根据屏幕尺寸判断显示几条
				biResult.agentCallRankVoList.sort((a, b) => {
					return b.callTotalRank - a.callTotalRank
				})
				// console.log('screenWidthRatio', screenWidthRatio)
				// 过滤姓名为空的数据
				biResult.agentCallRankVoList = biResult.agentCallRankVoList.filter((item) => {
					return item.agentName !== '' && item.agentName !== null && item.agentName !== undefined
				})
				if (screenWidthRatio.value < 1600) {
					agentOrderList.value = biResult.agentCallRankVoList.slice(0, 10)
				} else {
					agentOrderList.value = biResult.agentCallRankVoList
				}
				agentOrderList.value.forEach((item, i) => {
					if (!item.agentName) {
						item.agentName = item.agentId
					}
				})
				agentClassOptions.value.limitMoveNum = agentOrderList.value.length
				//客户地区分布
				mapOption.value.series[0].data = biResult.areaVoList.map((item) => {
					return {
						name: item.areaName,
						value: item.areaCustomerNum
					}
				})
				mapOption.value.visualMap.max = Math.max(...mapOption.value.series[0].data.map((item) => Number(item.value)))
				mapChart.setOption(mapOption.value)
				// //添加tooltip轮播
				// startTooltipInterval()
				// //鼠标移入停止定时器
				// mapChart.on('mouseover', (params) => {
				// 	clearInterval(tooltipInterval)
				// 	tooltipInterval = null
				// })
				// //鼠标移出开启定时器
				// mapChart.on('mouseout', (params) => {
				// 	startTooltipInterval()
				// })
				//客户地区排行榜
				biResult.areaVoList.sort((a, b) => {
					return b.areaCustomerNum - a.areaCustomerNum
				})
				const total = biResult.areaVoList.reduce((acc, item) => {
					return acc + item.areaCustomerNum
				}, 0)
				let orderAreaData = []
				biResult.areaVoList.forEach((item, i) => {
					orderAreaData.push({
						order: i + 1,
						name: item.areaName,
						rate: ((item.areaCustomerNum / total) * 100).toFixed(2)
					})
				})
				orderAreaList.value = orderAreaData
				classOptions.value.limitMoveNum = orderAreaData.length
			} catch (error) {
				console.error('加载数据失败:', error)
			} finally {
				mapChart.hideLoading()
			}
		}, 1000)

		// 自适应大小
		dashBoardResize = throttle(() => {
			setTimeout(() => {
				mapChart?.resize()
			}, 500)
		}, 200)
		window.addEventListener('resize', dashBoardResize)
		updateTopData()
	})

	// 组件卸载时清理
	onUnmounted(() => {
		window.removeEventListener('resize', dashBoardResize)
		mapChart?.dispose()
		window.dashBoardTooltipItemClick = null
		clearInterval(tooltipInterval)
		clearInterval(updateTopInterval)
		tooltipInterval = null
		updateTopInterval = null
	})
	// ===========================================METHODS==================================================
	//排名色
	const getOrderColor = (order) => {
		switch (order) {
			case 1:
				return orderColor[0]
			case 2:
				return orderColor[1]
			case 3:
				return orderColor[2]
			default:
				return orderColor[3]
		}
	}
	//排名榜进度条
	const getOrderRate = (num, type) => {
		let total
		if (type === 'agent') {
			total = agentOrderList.value[0].callTotalRank + 10
		} else if (type === 'team') {
			total = teamOrderList.value[0].callTotalRank + 10
		} else {
			total = orderAreaList.value[0].rate + 10
		}
		return ((num / total) * 100).toFixed(2) + '%'
	}
	// tooltip添加点击事件处理函数
	const dashBoardTooltipItemClick = (area, label, url) => {
		curAreaInfo.value.area = area
		curAreaInfo.value.label = label
		currentAudioUrl.value = url // 这里替换为实际的音频URL
		showAudioPlayer.value = true
		// 添加延时以确保 DOM 更新后再执行自动播放
		nextTick(() => {
			if (audioRef.value) {
				audioRef.value.load() // 重新加载音频
				audioRef.value.play().catch((e) => {
					alert('自动播放失败:')
				})
			}
		})
	}
	// 添加音频错误处理
	const handleAudioError = (e) => {
		alert('音频播放出错了')
	}
	const ScrollEnd = () => {
		alert('end')
	}
	//动态选中地图区域
	const highlightRegion = (index) => {
		mapChart.dispatchAction({
			type: 'select',
			seriesIndex: 0,
			dataIndex: index
		})
		mapChart.dispatchAction({
			type: 'showTip',
			seriesIndex: 0,
			dataIndex: index
		})
	}
	//取消高亮显示
	const cancelHighlightRegion = (index) => {
		mapChart.dispatchAction({
			type: 'unselect',
			seriesIndex: 0,
			dataIndex: index
		})
		// mapChart.dispatchAction({
		// 	type: 'hideTip',
		// 	seriesIndex: 0,
		// 	dataIndex: index
		// })
	}
	//开启tooltip轮播
	const startTooltipInterval = () => {
		tooltipInterval = setInterval(() => {
			if (curIndex.value > 0) {
				cancelHighlightRegion(curIndex.value - 1)
			}
			if (curIndex.value >= orderAreaList.value.length - 1) {
				curIndex.value = 0
			}
			highlightRegion(curIndex.value++)
		}, 2000)
	}
	//定时更新顶部数据
	const updateTopData = () => {
		updateTopInterval = setInterval(async () => {
			const biResult = await getData()
			//顶部数据
			countData.value.forEach((item) => {
				// 根据类型处理数字
				switch (item.type) {
					case 'duration':
						item.value = tool.formatNumber(biResult[item.field].toFixed(2))
						break
					case 'rate':
						item.value = `${tool.formatNumber((biResult[item.field] * 100).toFixed(2))}`
						break
					default:
						item.value = tool.formatNumber(biResult[item.field].toFixed(0))
						break
				}
			})

			// countData.value.forEach((item) => {
			// 	// 根据类型处理数字
			// 	switch (item.type) {
			// 		case 'duration':
			// 			item.value = tool.formatNumber((Math.random()*1000).toFixed(2))
			// 			break
			// 		case 'rate':
			// 			item.value = `${tool.formatNumber((Math.random()*1000).toFixed(2))}`
			// 			break
			// 		default:
			// 			item.value = tool.formatNumber((Math.random()*10000).toFixed(0))
			// 			break
			// 	}
			// })
		}, 11000)
	}
	// ===========================================REQUEST==================================================
	const getData = async () => {
		const res = await biChartApi.getResultByType('MAIN_STATISTICS_DAY')
		return JSON.parse(res.biResult)
	}
</script>
<style lang="less" scoped>
	#dashBoard {
		.tooltip-scroll {
			height: 200px;
			overflow: hidden;
		}
		/* 统计数字 */
		.count {
			height: 150px;
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			grid-column-gap: 5px;
			margin-bottom: 10px;
			.count-item {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				padding: 20px 0;
				border-radius: 2px;
				.count-item-title {
					font-size: 18px;
					font-weight: 600;
				}
				.count-item-num {
					display: flex;
					align-items: center;
					justify-content: center;

					span:nth-child(1) {
						font-size: 32px;
						font-weight: 700;
					}
					span:nth-child(2) {
						font-size: 18px;
						font-weight: 700;
						white-space: nowrap;
					}
					// // 添加数字翻转动画
					// .flip-enter-active {
					// 	animation: flip-in 0.6s ease-out;
					// }
					// .flip-leave-active {
					// 	animation: flip-out 0.6s ease-in;
					// 	position: absolute;
					// }

					// @keyframes flip-in {
					// 	0% {
					// 		transform: translateY(100%);
					// 		opacity: 0;
					// 	}
					// 	100% {
					// 		transform: translateY(0);
					// 		opacity: 1;
					// 	}
					// }

					// @keyframes flip-out {
					// 	0% {
					// 		transform: translateY(0);
					// 		opacity: 1;
					// 	}
					// 	100% {
					// 		transform: translateY(-100%);
					// 		opacity: 0;
					// 	}
					// }
				}
			}
			.count-item:nth-child(1),
			.count-item:nth-child(7) {
				background: #1f2c85;
			}
			.count-item:nth-child(3),
			.count-item:nth-child(5) {
				background: #3d76f6;
			}
			.count-item:nth-child(4) {
				background: #4096ff;
			}
			.count-item:nth-child(2),
			.count-item:nth-child(6) {
				background: #3b50d0;
			}
		}
		/* 统计图表 */
		.statis {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px;
			// display: grid;
			// grid-template-columns: 1.8fr 3.5fr 2fr 1.5fr;
			// grid-column-gap: 10px;
			height: calc(100% - 160px);
			> div {
				height: 100%;
				// border: 2px solid #2c4095;
				// padding: 20px 20px;
				// border-radius: 2px;
				.statis-title {
					font-size: 18px;
					font-weight: 600;
					text-align: left;
				}
			}
			/* 排行榜 */
			// .statis-order,
			// .statis-callout {
			// 	flex: 1;
			// }
			.statis-order {
				flex: 1;
				display: flex;
				flex-direction: column;
				// .statis-order1 {
				// 	height: 70%;
				// }
				// .statis-order2 {
				// 	height: 30%;
				// }
				.statis-order1,
				.statis-order2 {
					display: flex;
					flex-direction: column;
					/* align-items: start; */
				}
				.statis-order1 {
					height: 320px;
					.statis-order1-list {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: calc(100% - 20px);
					}
				}
				.statis-order2 {
					height: calc(100% - 320px);
					padding: 20px 0;
					.list-title {
						display: grid;
						grid-template-columns: 0.8fr 3fr 3fr 1.2fr;
						padding-bottom: 10px;
						color: #ccc;
						> div:nth-child(2) {
							text-align: center;
						}
					}
					.statis-order2-list {
						height: calc(100% - 20px);
						overflow-y: auto;
						&::-webkit-scrollbar {
							display: none;
						}
						// .list-item {
						// 	.list-item-dept {
						// 		text-align: center;
						// 	}
						// }
					}
				}
				.order-list {
					// display: flex;
					// flex-direction: column;
					// justify-content: space-between;
					.list-item {
						display: grid;
						grid-template-columns: 0.5fr 3fr 3fr 1fr;
						padding-bottom: 10px;
						> div {
							overflow: hidden;
						}
						.list-item-num {
							border-radius: 2px;
							text-align: center;
						}
						.list-item-name {
							margin: auto 10px;
							text-align: center;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.list-item-bar {
							display: flex;
							align-items: center;
							margin-right: 10px;
							p {
								border-radius: 2px;
								background: linear-gradient(to right, #87b0f3, #0b22c4);
								margin-bottom: 0;
								height: 12px;
							}
						}
					}
				}
			}
			// 地区排行
			.statis-order-area {
				flex: 1;
				display: flex;
				flex-direction: column;
				.statis-order-list {
					// flex: 1;
					// height: 500px;
					// background: #1f2c85;
					// height: 100%;
					// display: flex;
					// flex-direction: column;
					// justify-content: space-between;
					height: calc(100% - 30px);
					overflow-y: auto;
					//滚动条样式
					&::-webkit-scrollbar {
						display: none;
						width: 6px;
						height: 6px;
					}
					&::-webkit-scrollbar-thumb {
						background: #3d76f6;
						border-radius: 3px;
					}
					&::-webkit-scrollbar-track {
						background: rgba(255, 255, 255, 0.1);
						border-radius: 3px;
					}
					.list-item {
						display: grid;
						grid-template-columns: 0.5fr 1.5fr 2fr 1.5fr;
						padding-bottom: 10px;
						text-align: center;
						.list-item-num {
							border-radius: 2px;
						}
						.list-item-name {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.list-item-bar {
							display: flex;
							align-items: center;
							p {
								border-radius: 2px;
								background: linear-gradient(to right, #87b0f3, #0b22c4);
								margin: 0 0 0 0;
								height: 12px;
							}
						}
					}
				}
			}
			/* 省份分布 */
			.statis-map {
				display: flex;
				flex-direction: column;
				width: 55%;
				position: relative;
				#chinaMap {
					flex: 1;
				}
				//录音控件样式
				.audio-player {
					position: absolute;
					left: 20px;
					bottom: 20px;
					width: 450px;
					background: #18233e; // 移除透明度
					border: 1px solid #1e4b9c;
					border-radius: 4px;
					padding: 10px;
					color: #fff;

					.player-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10px;
						font-size: 14px;

						.close-btn {
							cursor: pointer;
							font-size: 20px;
							&:hover {
								color: #5794f7;
							}
						}
					}

					.audio-control {
						width: 100%;
						height: 25px;
						/** 去掉默认的背景颜色 */
						&::-webkit-media-controls-enclosure {
							background-color: #8eaeee;
						}
					}
				}
			}
		}
	}
</style>
